<template>
  <div style="width: 100%;background: #F5F5F5;">
    <div id="body1">
      <el-row style="width: 80%;margin-left: 5%">
        <!--导航栏-->
        <el-col :span="4"><div class="grid-content bg-purple tree"style="height: 350px;width: 350px">
          <div style="position: relative;z-index: 3" @mouseleave="hide">
            <ul class="treeul">
              <li v-for='(data,index) in data1' id="treeli" style="width: 190px" @mouseover="show">
                <el-link :underline="false" :href="'#/CourseCenterBody?ctId='+data.yjId" class="links">{{data.yj}}<span style="display:none;">{{index}}</span></el-link><span class="spanmenu"> › </span>
              </li>
            </ul>
            <div style="float: left;height: 366px;width:150px;display:none;z-index: 3" ref="div1">
              <ul id="onesonul" class="sonul">
                <li v-for='(data,index) in data2'>
                  <el-link :underline="false" :href="'#/CourseCenterBody?ctId='+data.ctId" class="links2">{{data.ctName}}</el-link>
                </li>
              </ul>
            </div>
          </div>
        </div></el-col>
        <!--轮播图-->
        <el-col :span="20"><div class="grid-content bg-purple-light">
          <div class="block" >
            <el-carousel :interval="10000" height="350px" arrow="never" >
              <el-carousel-item v-for="(item,index) in imgList" :key="index" >
                <a :href="item.advertisingLink" ><img v-bind:src="item.cImage" height="400px" width="100%"/></a>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    methods:{
      //轮播图显示
      img(){
        this.$axios.get('education-system/sys/carousel/getAllAdv').then(r=>{
          this.imgList=r.data.obj;
          //alert(JSON.stringify(this.imgList))
          //alert(JSON.stringify(r.data));
        })
      },
      qqueryAll(){
        this.$axios.get('education-system/sys/course-type/getAllCourseType').then(r=>{
          this.data1 = r.data.obj;
          //alert(JSON.stringify(r.data))
        })
      },
      show(val){
        let index = val.currentTarget.firstElementChild.firstElementChild.firstElementChild.innerHTML;
        this.data2 = this.data1[index].ej;
        this.$refs.div1.style.display = "block";
      },
      hide(){
        this.$refs.div1.style.display = "none";
      }
    },
    /*页面加载时调用*/
    created(){
      this.img();
      this.qqueryAll();
      // alert("首页")
    },
    data() {
      return {
        isCollapse: true,
        imgList:[
          /*{imgurl:require('../../assets/img/h1.jpg')},
          {imgurl:require('../../assets/img/h2.jpg')},
          {imgurl:require('../../assets/img/h3.jpg')},
          {imgurl:require('../../assets/img/h4.jpg')}*/
        ],
        data1:[
          {pname:"后台开发",cname:["系统架构","项目实战","单点突破"]},
          {pname:"云计算/大数据",cname:["机器学习","人工智能","Spark","爬虫","Python","云计算","大数据","区块链","Go语言"]},
          {pname:"数据存储",cname:["MySQL","Redis","FastDFS"]},
          {pname:"运维/测试",cname:["运维","测试",]},
          {pname:"产品/运营",cname:["产品",]},
          {pname:"网络考试/认证"},
          {pname:"开源项目",cname:["后台管理系统","龙果支付系统"]},
        ],
        data2:''
      };
    },
  }
</script>

<style scoped>
  #body1{
    height: 400px;
    padding:10px 0;margin: 0 auto;width: 1500px
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .treeul{
    height: 350px;
    width: 200px;
    line-height:20px;
    background-color: #444649;
    border-radius: 10px 0 0 10px;
    padding:0;
    margin: auto;
    float: left;
  }
  .treeul li{
    list-style:none;
    line-height: 50px;
    height: 50px;
    color: #CCCCCC;
    padding-left:10%;
    text-align: left;
  }
  .spanmenu{
    float: right;
    margin-right: 15%;
  }
  .sonul{
    height: 350px;
    width: 140px;
    background-color: white;
    padding-left:20%;
    margin: auto;
    float: left;
  }
  .sonul li{
    list-style:none;
    margin-bottom: 10%;
    margin-top: 10%;
    color: black;
  }
  #treeli:hover{
    background-color:#F5F5F5;
    color:red;
  }
  #treeli:hover .links{
    color: red;
  }
  #treeli:hover{
    display: block;
  }
  .fdiv:hover .div1{
    display: block;
  }

  .links{
    font-size: 15px;
    color: #CCCCCC;
  }
  .links2{
    font-size: 15px;
    color:black;
    font-weight: bolder;
  }
  .links:hover ,.links2:hover{
    color:red;
  }
  #treeli:first-child:hover {
    border-radius: 10px 0 0 0px;
  }
  #treeli:last-child:hover {
    border-radius: 0px 0 0 10px;
  }
</style>
